<template>
	<view class="fixAuto bb middle">
		<view :style="{width : titleWidth + 'rpx'}" v-if="title">
			{{title}}
		</view>
		<view class="father">
			
			<view class="flex" :class="textClassName">
				{{_place}}
				<view class="sIcon-arrowRight grey ml"></view>
			</view>
			
			<picker class="abs op0" :mode="mode" :range="list" :value="indexValue" @change="_changeValue">
				<view class="abs op0">请选择</view>
			</picker>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"pickers",
		props:{
			mode : {
				type : String ,
				default : "selector"
			},
			title : String ,
			disabled : Boolean ,
			name : String ,
			value : {
				type : String,
				default : ""
			},
			placeholder : String ,
			titleWidth : {
				type : [String , Number] ,
				default : 200
			},
			list : {
				type : Array ,
				default(){
					return [] ;
				}
			}
		},
		data() {
			return {
				valueSync : '' 
			};
		},
		watch:{
			value : {
				handler(){
					this.valueSync = this.value || '';
				},
				immediate : true 
			}
		},
		computed:{
			_place(){
				return this.valueSync ? this.valueSync : '请选择' ;
			},
			indexValue(){
				return this.list.findIndex(item => item === this.valueSync);
			},
			textClassName(){
				let names = [] ;
				if (!this.valueSync) {
					names.push('rt grey') ;
				}
				if (this.valueSync == '联网' || this.valueSync == '正常') {
					names.push('green') ;
				}
				if (this.valueSync == '故障') {
					names.push("red") ;
				}
				if (this.valueSync == '无') {
					names.push("yellow") ;
				}
				return names.join(" ") ;
			}
		},
		methods:{
			_changeValue(e){
				this.valueSync = this.list[e.detail.value] ;
				this.$emit("input" , this.valueSync) ;
			}
		}
	}
</script>

<style>

</style>
